import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default class Base {
    constructor(ref) {
        console.log(ref.offsetWidth);
        // 创建场景
        this.scene = new THREE.Scene()

        var width = ref.offsetWidth; //canvas画布宽度
        var height = ref.offsetHeight; //canvas画布高度
        this.width = width
        this.height = height
        var k = width / height; //canvas画布宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        console.log(-s * k);
        this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        this.camera.position.set(200, 300, 200); //设置相机位置
        this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
        // const geometry1 = new THREE.BoxGeometry(100, 100, 100);
        // const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        // const cube = new THREE.Mesh(geometry1, material1);
        // console.log(this.scene);
        // this.scene.add(cube);
        // 创建渲染器
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(width, height)

        // 使物体更加清晰
        this.renderer.setPixelRatio(window.devicePixelRatio)
        console.log(this.renderer.domElement);
        ref.appendChild(this.renderer.domElement)
        // document.body.appendChild(this.renderer.domElement)
        // this.render();
        new OrbitControls(this.camera, this.renderer.domElement);
    }
    // 渲染函数
    // render() {

    //     this.renderer.render(this.scene, this.camera);//执行渲染操作
    //     // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    //     // 执行渲染函数render，渲染下一帧
    // }

    update() {

        this.renderer.render(this.scene, this.camera)
    }
    // 自适应 
    /**
     * ! var-translate-en
     * ? 
     * *ss
     * todo addUsers
     * 用户列表
     */
    resize() {
        this.camera.aspect = this.width  / this.height
        this.camera.updateProjectionMatrix()
        this.renderer.setSize(this.width, this.height)
    }
    // 环境光
    addAmbientLight(intensity = 1, color = 0xffffff) {
        const light = new THREE.AmbientLight(color, intensity);
        this.scene.add(light)

    }
}